<template>
    <div class="bg">
        <div class="logo"></div>
        <div class="login">
            <div class="titl">
                <span>航运学院信息管理系统</span>
            </div>
            <div class="userName">
                <span class="icon"></span>
                <input type="text" placeholder="请输入工号" v-model="username">
            </div>
            <div class="pw">
                <span class="icon"></span>
                <input type="password" placeholder="请输入密码" v-model="password">
            </div>
            <div class="hintBox">
                <span ref="hint"></span>
            </div>
            <div class="findPassword">
                <a class="findPassword_a" title="点击找回密码" @click="openDialog">忘记密码?</a>
            </div>
            <div class="loginBtn">
                <input type="button" value="登录" @click="login">
            </div>
        </div>
        <el-dialog title="找回密码" :visible.sync="changePwdVisible" size="tiny">
            <el-form :model="form" :rules="rules" ref="form" label-width="80px">
                <el-form-item label="工号" prop="username">
                    <el-input type="text" v-model="form.username" placeholder="请输入工号"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input type="text" v-model="form.code" style="width: 76.5%" placeholder="请输入验证码"></el-input>
                    <el-button @click="getCode" type="primary" plain>{{tips}}
                    </el-button>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="affirm">
                    <el-input type="password" v-model="form.affirm" placeholder="请确认密码"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="changePwdVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePwdSub">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import http from '../assets/js/http'

    let reg = new RegExp("^[A-Za-z0-9]+$");
    export default {
        data() {
            var validator = (rule, value, callback) => {
                if (value.trim() === "") {
                    callback(new Error("请输入新密码"));
                } else if (value.length < 6 || value.length > 16) {
                    callback(new Error("密码长度为 6 到 16 个字符!"));
                } else if (!reg.test(value)) {
                    callback(new Error("密码只能由英文字母和数字组成!"));
                } else {
                    callback();
                }
            };
            var validator_affirm = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请确认新密码"));
                } else if (value !== this.form.password) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
                username: '',
                password: '',
                form: {
                    username: "",
                    code: "",
                    password: "",
                    affirm: ""
                },
                changePwdVisible: false,
                rules: {
                    username: [
                        {required: true, message: '请输入工号', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                        {min: 6, max: 6, message: '请输入6位验证码', trigger: 'blur'}
                    ],
                    password: [{validator: validator, trigger: "blur"}],
                    affirm: [{validator: validator_affirm, trigger: "blur"}]
                },
                tips: '获取验证码',
            };
        },
        methods: {
            login() {
                if (this.username.trim().length === 0 || this.password.length === 0) {
                    this.$refs.hint.innerText = '工号或密码不能为空';
                    return;
                }
                let data = {
                    numb: this.username,
                    password: this.password
                }
                this.apiPost('users/teacherLogin', data).then(res => {
                    if (res.error === 0) {
                      localStorage.setItem("userNumber",data.numb)
                        this.$router.push('/student');
                    } else if (res.error === 1) {
                        this.$refs.hint.innerText = res.msg;
                    } else if (res.error === 2) {
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                        setTimeout(() => {
                            this.$router.push('/student');
                        }, 0);
                    }
                })
            },
            changePwdSub() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let data = qs.stringify(this.form);
                        axios.post(PATH + "User/findPassword", data).then(res => {
                            if (res.data.error) {
                                this.$message.error(res.data.msg);
                            } else {
                                this.$message({
                                    message: res.data.msg,
                                    type: "success"
                                });
                                this.changePwdVisible = false
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            openDialog() {
                this.form = {
                    username: "",
                    password: "",
                    affirm: "",
                    code: ""
                };
                this.changePwdVisible = true;
                setTimeout(() => {
                    this.$refs.form.resetFields();
                }, 0)
            },
            getCode() {
                if (this.form.username.trim().length === 0) {
                    this.$message({
                        message: '请输入工号,验证码会发送到帐号邮箱',
                        type: "warning"
                    });
                    return;
                }
                let data = {
                    username: this.form.username,
                };
                data = qs.stringify(data);
                axios.post(PATH + 'User/sendMail', data).then((res) => {
                    if (res.data.error === 0) {
                        this.$message({
                            message: res.data.msg,
                            type: "success"
                        });
                    } else if (res.data.error === 1) {
                        this.$message({
                            message: res.data.msg,
                            type: "error"
                        });
                    }
                })
            },
        },
        created() {
            this.apiGet('users/checkLogin').then(res => {
                if (res) {
                    this.$router.push('/student')
                }
            })
        },
        mixins: [http]
    }
</script>
<style lang="css" scoped>
    .bg {
        background: url(../../resource/imgs/bg.jpg) no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        position: relative;
        min-width: 1450px;
    }

    .findPassword {
        text-align: right;
    }

    .findPassword_a {
        font-size: 14px;
        color: #3f9ce2;
        padding-right: 18%;
        cursor: pointer;
    }

    .bg .logo {
        width: 246px;
        height: 74px;
        background: url(../../resource/imgs/logo1.png) no-repeat;
        position: absolute;
        top: 45px;
        left: 60px;
    }

    .bg .login {
        width: 450px;
        height: 380px;
        background-color: #fff;
        border-radius: 10px;
        position: absolute;
        right: 20%;
        top: 30%;
        text-align: center;
    }

    .bg .login .titl {
        font-size: 30px;
        color: #333;
        padding-top: 40px;
    }

    .hintBox {
        font-size: 14px;
        color: red;
        height: 30px;
        line-height: 30px;
    }

    .bg .login input {
        width: 300px;
        height: 30px;
        font-size: 16px;
        color: #333;
        padding: 0 30px;
        box-sizing: border-box;
        /* 清除默认样式 */
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        -ms-appearance: none;
        outline: none;
        border: 0;
        border-bottom: 1px solid #e5e5e5;

        text-align: center;
    }

    /* 修改placeholder默认样式 */
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #ccc;
        font-size: 16px;
        text-align: center;
    }

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #ccc;
        font-size: 16px;
        text-align: center;
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ccc;
        font-size: 16px;
        text-align: center;
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #ccc;
        font-size: 16px;
        text-align: center;
    }

    .userName {
        margin-top: 50px;
        position: relative;
    }

    .pw {
        margin-top: 30px;
        position: relative;
    }

    .icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 5px;
        left: 75px;
    }

    .userName .icon {
        background: url(../../resource/imgs/icon-head.png) no-repeat;
    }

    .pw .icon {
        background: url(../../resource/imgs/icon-pw.png) no-repeat;
    }

    .loginBtn {
        margin-top: 30px;
    }

    .login .loginBtn input {
        height: 40px;
        border-radius: 25px;
        background-color: #3f9ce2;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }
</style>
